<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>网易邮箱</title>
	<style>
	.main{
		width: 950px;
		height: 850px;
		margin: 0 auto;
		position: relative;
	}
	.one{
		width: 400px;
		height: 30px;
		border-right: 1px solid gray;
		margin-top: 35px;

	}
	.one img{
		float: left;
		width: 100px;
		height: 35px;
		margin-left: 30px;
	}
	
	.er{
		width: 550px;
		height: 30px;
		margin-left: 20px;
		position: absolute;
		top: 0;
		margin-left: 420px;
	}
	.er .san{
		font-size: 22px;
		color: gray;


	}
	.liu{
		width: 130px;
		height: 30px;
        position: absolute;
		top: 0;
		right: 0;
		text-align: center;
	}
	.liu .si{
		font-size: 10px;
		border-right:1px solid gray;
		margin-right:10px; 
		padding-right: 10px;
	}
	.liu .wu{
		font-size: 10px;
	}
	a{
		text-decoration:none;
	}
	.qi{
		width: 950px;
		height: 40px;
		margin-top: 30px;
		color: white;
		font-size:15px; 
		border-radius: 5px 5px 0 0;
	    background: -webkit-linear-gradient(top, #5b8fcb, #4774AA);
	}
	.qi span{
		display: inline-block;
		margin-top:10px;
		margin-left: 20px;

	}
	.ba{
		width: 650px;
		height: 700px;
		border-left: 0.5px solid gray;
		border-right: 0.5px solid gray;
		border-bottom: 0.5px solid gray;
		float: left;


	}
	.ba .jiu,.shi,.shiyi{
		width: 140px;
		height: 35px;
		border: 1px solid gray;
		background-color: #f5f5f5;
		text-align: center;
		display: inline-block;
		
		
		float: left;
	}
	.ba .jiu{
		border-radius: 5px 0px 0px 5px;
	}
	.ba .shiyi{
		border-radius: 0px 5px 5px 0px;
	}
	.shier .shisan{
		display: inline-block;
		text-align: center;
		margin-top: 10px;
	}
	.shier{
		width: 430px;
		height: 40px;
		margin: 0 auto;
		margin-top: 50px;
	}
	.hide{
		display: none;
	}
	.shisi{
		width: 450px;
		height: 550px;
		margin: 35px auto;
		font-size: 12px;
	}
	#shiwu{
		width: 210px;
		height: 25px;
	}
	.shisi p{
		font-size: 10px;
		color: gray;
		margin-left: 80px;
		
	}
	.shisi .shiliu{
		color: red;
	}
	#shiqi{
		width: 330px;
		height: 25px;

	}
	.shisi .shiba{
		margin-left: 25px;
	}
	.shiba p{
		margin-left: 50px;
	}
    #shijiu{
    	width: 200px;
    	height: 30px;
    }
    .shisi .ershi{
    	margin-left: 12px;
    }
    .ershi p{
    	margin-left: 65px;
    }
    .shisi img{
    	width: 120px;
    	height: 50px;
    	margin-left:10px;
    }
    .ershiyi{
    	margin-left: -16px;
    	margin-top:20px; 
    }
    .ershiyi .ershier{
    	margin-left:85px;
    }
    .ershisan{
    	margin-left:70px;
    }
    .ershisi{
    	width: 120px;
    	height: 40px;
    	background: -webkit-linear-gradient(top, #51aa3c, #349719);
    	color: white;
    	border-radius: 5px;
    	margin: 20px 80px;
    }
    .ershisi span{
    	display: inline-block;
    	margin: 10px 20px;
    	font-size: 16px;
    }
    .ershiwu{
    	width: 120px;
    	height: 50px;
    	margin-left: 300px;
    	margin-top: -50px;
    }
    .ershiwu p{
    	margin-left:10px; 
    }
.ershiliu{
	border: 0.5px solid gray;
	width: 140px;
	height: 30px;
	font-size: 14px;
	background-color: #eaeaea;
	border-radius: 5px;
	margin-left:75px; 
}
.ershiliu .ershiba{
	margin: 0 auto;
}
.ershijiu{
	width: 300px;
	height: 700px;
	float: left;
	position: absolute;
	right: 0;
	background-color: #f2f2f2;
	border-right: 0.5px solid gray;
	border-bottom: 0.5px solid gray;



}
.ershjiu img{

	width: 100%;
	height: 100%;
	
}


	</style>
</head>
<body>
<div class="main">
<div class="one">
<span><a href="http://mail.163.com/"><img src="img/1.png" alt=""></a></span>
<span><a href="http://www.126.com/"><img src="img/2.png" alt=""></a></span>
<span><a href="http://www.yeah.net/"><img src="img/3.png" alt=""></a></span>
</div>
<div class="er">
	<span class="san">中国第一大电子邮件服务商</span>
	
	</div>
	<div class="liu">
	<span class="si"><a href="http://mail.163.com/html/mail_intro/">了解更多</a></span>
	<span class="wu"><a href="http://help.mail.163.com/faq.do">意见反馈</a></span>
	</div>	
	<div class="qi"><span>欢迎注册无限容量的网易邮箱！邮件地址可以登录使用其他网易旗下产品。</span></div>
	<div class="ba">
	<div class="shier">
		<span class="jiu btn"><span class="shisan">注册字母邮箱</span></span>
		<span class="shi btn"><span class="shisan">注册手机号码邮箱</span></span>
		<span class="shiyi btn"><span class="shisan">注册VIP邮箱</span></span>
		</div>
		<div class="shisi">
		<div class="show ">
			<span class="shiliu">*</span>&nbsp;邮件地址&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" id="shiwu">&nbsp;&nbsp;@&nbsp;&nbsp;<select name="" id="">
		<option value="">163.com</option>
		<option value="">126.com</option>
		<option value="">yeah.net</option>
	</select><p>6~18个字符，可使用字母、数字、下划线，需以字母开头</p>
		</div>
		<div class="show shiba"><span class="shiliu">*</span>&nbsp;密码&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" id="shiqi"><p class="shijiu">6~16个字符，区分大小写</p></div>
		<div class="show "><span class="shiliu">*</span>&nbsp;确认密码&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" id="shiqi"><p>请再次填写密码</p></div>
		<div class="show "><span class="shiliu">*</span>&nbsp;手机号码&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" id="shiqi"><p>忘记密码时，可以通过该手机号码快速找回密码</p></div>
		<div class="show ershi"><span class="shiliu">*</span>&nbsp;验证码&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" id="shijiu"><div class="ershiwu"><img src="img/4.png" alt=""><p><a href="">看不清楚?换张图片</a></p></div><p>请填写图片中的字符，不区分大小写</p></div>
		<div class="show ershiliu"><span class="ershiba">免费获取验证码</span></div>

		<div class="show ershiyi"><span class="shiliu">*</span>&nbsp;短信验证码&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" id="shiqi"><p class="ershier">请查收手机短信，并填写短信中的验证码</p></div>
		<span class="ershisan"><input type="checkbox">同意<a href="http://reg.163.com/agreement.shtml">"服务条款"</a>和<a href="http://reg.163.com/agreement_game.shtml">"隐私权相关政策"</a></span>
		<div class="ershisi"><span>立即注册</span></div>



		</div>
	</div>
	<div class="ershijiu"><img src="img/5.gif" alt=""></div>
</div>

	
</body>
<script>
	var btnArr = document.getElementsByClassName('btn');
	var showArr = document.getElementsByClassName('show');
	for(var i=0; i<btnArr.length; i++){
		(function  (i) {
			btnArr[i].onclick = function  () {
				for(var j=0;j<btnArr.length;j++){
				btnArr[j].style.backgroundColor='white';
				btnArr[j].style.color='black';
				showArr[j].style.display='none';
			}
			btnArr[i].style.backgroundColor='#2164b8';
			btnArr[i].style.color='white';
			showArr[i].style.display='block';
				}			
		})(i);
		}





</script>
</html>